<template>
  <div class="workinfo">
    <van-nav-bar left-text="返回" title="职位详情" left-arrow @click-left="onClickLeft" />
    <div v-for="el in personlist" :key="el.id" class="all">
      <div class="workTitle">
        <h2>{{el.name}}</h2>
        <span>{{el.money}}</span>
      </div>
      <div class="workTitleBottom">
        <!-- <img :src="el.img" alt=""> -->
        <van-icon name="location-o" />
        <span>{{el.address}}</span>
        <van-icon name="calender-o" />
        <span>{{el.work_time}}</span>
        <van-icon name="user-o" />
        <span>{{el.xueli}}</span>
        <div class="headerImg" v-for="ele in companyMsg" :key="'item+'+ele.uid">
          <van-image round width="3.5rem" height="3.5rem" :src="el.img" />
        </div>
      </div>

      <div class="position_msg" v-for="item in positionMsg" :key="'item-'+item.uid">
        <div class="work">
          <h5>
            求职岗位 :
            <em>{{el.work}}</em>
          </h5>
          <p>{{el.isWork}}</p>
        </div>
        <p>【个人评价】</p>
        <ul>
          <li>{{el.youdian}}</li>
        </ul>
      </div>
      <div class="theBottom">
        <van-cell-group>
          <van-cell title="你的竞争力分析" value="使用竞争力分析器>"></van-cell>
        </van-cell-group>
        <div class="slotLabel">
          近90天共有
          <span>13</span>个老板沟通过该职位,相比他们,你的竞争力为第
          <span>8</span>名.
        </div>
      </div>
      <div class="btn" @click="gochat">
        <van-button type="info">立即沟通</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import BMap from 'vue-baidu-map'
// 个人信息导入
import person from '../../../data/person'
export default {
  data: () => ({
    id: '',
    listInfoData: [],
    personlist: person.data, // 个人信息
    positionMsg: [],
    companyMsg: [],
    demo: []
  }),
  created () {
    this.id = parseInt(this.$route.params.id)

    this.getlists()
    this.getXqlist()
    this.getCompany()
    this.listPerson()
    // 导航栏下标
    this.$store.state.activeinfo = 0
  },
  activated () {
    // this.id = parseInt(this.$route.params.id)

    // this.id = this.$route.params.id
    // this.getlists()
    this.getXqlist()
    this.getCompany()
  },
  // 强制刷新
  watch: {
    $route () {
      this.$router.go(0)
    }
  },
  methods: {
    // 把个人信息转化成对应id的数组
    listPerson () {
      this.personlist = [this.personlist[this.id]]
      console.log(this.personlist)
      // for (var i in this.personlist) {
      //   console.log(this.personlisthis.personlistt[i])
      //   // var arr = [i]
      //   // this.personlist = [i]
      //   // console.log(this.personlist[0].id)
      // }
    },
    async getlists () {
      const {
        data: { data, status }
      } = await this.$http.get('/lists/' + this.id)
      if (status !== 1) return console.log('请求数据失败')
      // console.log(data)
      this.listInfoData = data
      // console.log(this.id)
    },
    async getXqlist () {
      const {
        data: { data, status }
      } = await this.$http.get('/xqlist/' + this.id)
      if (status !== 1) return console.log('请求失败哦')
      // console.log(data)
      this.positionMsg = data
      // console.log(this.positionMsg)
    },
    async getCompany () {
      const {
        data: { data, status }
      } = await this.$http.get('/company/' + this.id)
      if (status !== 1) return console.log('请求失败哦')
      this.companyMsg = data
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    gochat () {
      this.getlists()
      const obj = {
        id: this.$route.params.id,
        img: this.listInfoData[0].tsrc,
        title: this.listInfoData[0].gname,
        name: this.companyMsg[0].faren
      }
      // console.log(obj)// vuex调用
      this.$store.dispatch('worklist_list', obj)
      this.$router.push('/news/interaction')
    }
  }
}
</script>
<style lang="less" scoped>
.workinfo {
  .van-nav-bar,
  .van-hairline--bottom {
    background: #4dd599;
    .van-icon,
    .van-icon-arrow-left,
    .van-nav-bar__arrow,
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-ellipsis {
      color: #fff;
    }
  }

  .all {
    margin-left: -25px;
    .workTitle {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-right: 102px;
      span {
        font-size: 18px;
        color: #4dd599;
      }
    }
    .workTitleBottom {
      display: flex;
      justify-content: stretch;
      align-items: center;
      font-size: 16px;
      margin-left: 50px;
      margin-top: -13px;
      span {
        padding: 0 5px;
      }
    }
    .headerImg {
      display: flex;
      align-items: center;
      margin-left: 94px;
      .van-image,
      .van-image--round {
        // width: 3.5rem !important;
        // height: 3.5rem !important;
        .van-image__error,
        .van-image__img,
        .van-image__loading {
          width: 60px !important;
          height: 60px;
          display: block;
        }
      }
      .headerMsg {
        font-size: 14px;
        font-weight: bold;
        margin: 0 10px;
      }
    }
    .position_msg {
      margin: 0 50px;
      border-bottom: 1px solid #cccccc;
      h5 {
        margin-left: 10px;
        em {
          color: red;
          font-size: 16px;
        }
      }
      p {
        font-size: 14px;
        font-weight: bold;
      }
      ul {
        background: #eee;
        width: 114%;
        border-radius: 10px;
        padding: 0 9px;
        box-sizing: border-box;
        li {
          font-size: 14px;
          list-style: none;
          color: #999;
          padding: 2px 0;
        }
      }
      .companyDsc {
        p {
          font-size: 14px;
          font-weight: 100;
          width: 111%;
          padding-left: 8px;
          border-radius: 10px;
          background: #eee;
          color: #999;
        }
      }
    }
    .Label {
      display: flex;
      align-items: center;
      margin: 6px 50px 20px;
      span {
        display: inline-block;
        height: 23px;
        line-height: 23px;
        font-size: 14px;
        color: #333;
        background: #eee;
        margin: 2px 4px;
      }
    }
    .companyLabel {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background: #eee;
      box-sizing: border-box;
      padding-left: 48px;
      .companyMsg {
        font-size: 14px;
        font-weight: bolder;
        margin: 0 10px;
        color: #333;
      }
    }
    .addressImg {
      box-sizing: border-box;
      background: beige;
      padding: 0 20px;
      width: 375px;
      margin-left: 25px;
      /* text-align: center; */
      border-radius: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .warn {
      margin-left: 50px;
      .van-icon,
      .van-icon-warn-o {
        color: red;
        margin-right: 4px;
      }
      span {
        color: red;
        font-size: 14px;
        position: absolute;
      }
      p {
        color: #333;
        font-size: 12px;
      }
    }
    .theBottom {
      margin-bottom: 30px;
      .van-cell__title {
        margin-left: 25px;
        span {
          font-weight: bolder;
        }
      }
      .slotLabel {
        font-size: 12px;
        color: #999;
        margin-bottom: 20px;
        margin-left: 40px;
        span {
          color: #53cac3;
        }
      }
    }
    .btn {
      margin-bottom: 50px;
      .van-button,
      .van-button--info,
      .van-button--normal {
        width: 100%;
        background-color: #4dd599;
        border: none;
        span {
          margin-left: 23px;
        }
      }
    }
  }
}
.work {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
